<template>
  <div class="app-container dashboard-container">
    <div>
      <!-- S 我的待办 -->
      <div v-if="$permission('dashboard:myPendingTask')" class="layui-card">
        <div class="layui-card-body box-padding">
          <div
            class="border-style-bottom flex_wrap_between_middle header-title"
          >
            <p><span class="titleSelf-linestyle"></span>我的待办</p>
            <el-badge
              :value="todoTaskCount"
              :max="99999"
              @click="seeMore('myPendingTask')"
              class="right-menu-item hover-effect todoTaskCount"
              style="left: 100px"
            >
              全部待办
              <i class="layui-icon layui-icon-form"></i>
            </el-badge>
            <el-button @click="getTodoList">刷新</el-button>
          </div>
          <div class="layui-row" style="padding: 12px 0">
            <ul v-if="todoTaskList && todoTaskList.length">
              <li
                v-for="(items, i) in todoTaskList"
                :key="i"
                class="tips-list-item"
                :class="
                  items.level === 2
                    ? 'level2-bg'
                    : items.level === 1
                    ? 'level1-bg'
                    : 'level0-bg'
                "
                style="padding: 1px; border-bottom: 1px solid #f0f0f0"
              >
                <span style="display: flex; justify-content: space-between">
                  <span style="display: flex; align-items: center">
                    <span class="badge badge-list"></span>
                    <span
                      style="
                        padding-left: 17px;
                        display: flex;
                        flex-direction: column;
                      "
                    >
                      <span>
                        <span>
                          {{ items.title }}
                        </span>
                      </span>
                      <span style="color: #999; font-size: 12px">
                        {{ items.subTitle }}</span
                      >
                    </span>
                  </span>
                  <div style="display: flex; flex-direction: column">
                    <span
                      :class="
                        items.level === 2
                          ? 'level2'
                          : items.level === 1
                          ? 'level1'
                          : 'level0'
                      "
                      >{{
                        moment(items.arrivalTime).format('YYYY-MM-DD HH:mm:ss')
                      }}</span
                    >
                    <span>
                      <el-button
                        size="small"
                        style="float: right"
                        v-if="items.taskType === 1"
                        @click="$fn.setFlowData(items, 'myPending', route)"
                        >{{
                          items.auditStatus == 4 ? '处理' : '审批'
                        }}</el-button
                      >
                      <el-button
                        size="small"
                        style="float: right"
                        v-if="items.taskType === 2"
                        @click="checkCalend(items)"
                        >处理</el-button
                      >
                    </span>
                  </div>
                </span>
              </li>
            </ul>
            <p v-else style="text-align: center">暂无数据</p>
          </div>
        </div>
      </div>
      <!-- E 我的待办 -->
      <!-- S 未读消息 -->
      <div v-if="$permission('dashboard:latestMessage')" class="layui-card">
        <div class="layui-card-body box-padding">
          <div
            class="border-style-bottom flex_wrap_between_middle header-title"
          >
            <p><span class="titleSelf-linestyle"></span>最新未读消息</p>
            <el-badge
              :value="notReadCount"
              :max="99999"
              @click="seeMore('messageManager')"
              class="right-menu-item hover-effect"
            >
              全部未读消息
              <i class="layui-icon layui-icon-notice"></i>
            </el-badge>
          </div>
          <div class="layui-row" style="padding: 12px 0">
            <ul v-if="messageDataList && messageDataList.length">
              <li
                v-for="(items, i) in messageDataList"
                :key="i"
                class="tips-list-item"
                :class="
                  items.level === 2
                    ? 'level2-bg'
                    : items.level === 1
                    ? 'level1-bg'
                    : 'level0-bg'
                "
                style="padding: 1px; border-bottom: 1px solid #f0f0f0"
              >
                <span class="badge"></span>
                <span
                  v-for="(itemChild, indexChild) in items.content"
                  :key="indexChild"
                >
                  <span
                    v-if="
                      itemChild.type === 1 ||
                      (itemChild.type === 2 &&
                        (itemChild.url == '' || itemChild.url == undefined))
                    "
                    >{{ itemChild.content }}</span
                  >
                  <span
                    v-else
                    class="message-content"
                    @click="turnPage(itemChild, items)"
                    >{{ itemChild.content }}</span
                  >
                </span>
                <div style="float: right">
                  <span
                    :class="
                      items.level === 2
                        ? 'level2'
                        : items.level === 1
                        ? 'level1'
                        : 'level0'
                    "
                    >【{{ items.title }}】</span
                  >
                  <span
                    :class="
                      items.level === 2
                        ? 'level2'
                        : items.level === 1
                        ? 'level1'
                        : 'level0'
                    "
                    >{{
                      moment(items.createTime).format('YYYY-MM-DD HH:mm:ss')
                    }}</span
                  >
                </div>
              </li>
            </ul>
            <p v-else style="text-align: center">暂无数据</p>
          </div>
        </div>
      </div>
      <!-- E 未读消息 -->
      <div v-if="$permission('dashboard:scheduleTask')" class="layui-card">
        <div class="layui-card-body box-padding">
          <div
            class="border-style-bottom flex_wrap_between_middle header-title"
          >
            <p><span class="titleSelf-linestyle"></span>日程安排</p>
            <el-button @click="refushCalendar">刷新</el-button>
          </div>
          <div class="layui-row display-flex">
            <div style="width: 400px; height: 330px; flex-shrink: 0">
              <el-calendar
                style="width: 100% !important; height: 100% !important"
                v-model="calendar.date"
              >
                <template #date-cell="{ data }">
                  <div>
                    <el-badge
                      v-if="
                        calendar.count[data.day] && calendar.count[data.day] > 0
                      "
                      :value="calendar.count[data.day]"
                      :max="100"
                    >
                      <span>{{ data.day.split('-').slice(2).join('') }}</span>
                    </el-badge>
                    <span v-else>{{
                      data.day.split('-').slice(2).join('')
                    }}</span>
                  </div>
                  <div
                    v-if="calendar.count[data.day] == 0"
                    class="calendar-line"
                  ></div>
                </template>
              </el-calendar>
            </div>

            <div style="flex: 1; padding-left: 20px; width: 50%">
              <dialog-table
                style="width: 100%"
                v-model:data="tableInfo.data"
                :listen-height="false"
                :tab-index="true"
                :field-list="tableInfo.fieldList"
                :handle="tableInfo.handle"
                :highlight-row="true"
                :maxHeight="315"
                :check-box="false"
                :pager="false"
              />
            </div>
          </div>
        </div>
      </div>
      <div v-if="$permission('dashboard:yesterdayAmount')" class="layui-card">
        <div class="layui-card-body box-padding">
          <div
            class="border-style-bottom flex_wrap_between_middle header-title"
          >
            <p><span class="titleSelf-linestyle"></span>昨日使用金额</p>
            <i
              v-if="yesterdayAmountUseList.length > 6"
              class="slip-edit"
              :class="
                yesterdayAmountIndex === 6
                  ? 'el-icon-arrow-right'
                  : 'el-icon-arrow-down'
              "
              @click="moreYesterdayAmount"
            ></i>
          </div>
          <div class="layui-row">
            <template v-for="(item, index) in yesterdayAmountUseList">
              <div
                v-if="index < yesterdayAmountIndex"
                :key="index"
                class="layui-col-xs6 layui-col-sm7 layui-col-md2"
                @click="clickUsePrice(item.deptId)"
              >
                <div class="border dashboard-card box-shadow">
                  <div v-if="index === 0" class="dashboard-title">全部部门</div>
                  <div v-else class="dashboard-title">{{ item.deptName }}</div>
                  <h4>
                    ￥{{
                      item.sumPrice || item.sumPrice === 0
                        ? $fn.TripartiteMethod(item.sumPrice)
                        : '--'
                    }}
                  </h4>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
      <div
        v-if="$permission('dashboard:depotStorageAmount')"
        class="layui-card"
      >
        <div class="layui-card-body box-padding">
          <div
            class="border-style-bottom flex_wrap_between_middle header-title"
          >
            <p><span class="titleSelf-linestyle"></span>库存金额</p>
            <i
              v-if="amountStockList.length > 6"
              class="slip-edit"
              :class="
                stockIndex === 6 ? 'el-icon-arrow-right' : 'el-icon-arrow-down'
              "
              @click="moreAmountStock"
            ></i>
          </div>
          <div class="layui-row">
            <template v-for="(item, index) in amountStockList">
              <div
                v-if="index < stockIndex"
                :key="index"
                class="layui-col-xs6 layui-col-sm7 layui-col-md2"
                @click="clickStockPrice(item.depotId)"
              >
                <div class="border dashboard-card box-shadow">
                  <div v-if="index === 0" class="dashboard-title">全部仓库</div>
                  <div v-else class="dashboard-title">{{ item.depotName }}</div>
                  <h4>
                    ￥{{
                      item.sumPrice || item.sumPrice === 0
                        ? $fn.TripartiteMethod(item.sumPrice)
                        : '--'
                    }}
                  </h4>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
      <div v-if="$permission('dashboard:usage')" class="layui-card">
        <div class="layui-card-body box-padding">
          <div
            class="border-style-bottom flex_wrap_between_middle header-title"
          >
            <p><span class="titleSelf-linestyle"></span>使用情况</p>
          </div>
          <monthly-consume-bar
            :permission-price="$permission('consumeOrder:price')"
            :permission-list="$permission('consumeOrder:list')"
          ></monthly-consume-bar>
        </div>
      </div>
      <div v-if="$permission('dashboard:ranking')" class="layui-card">
        <div class="layui-card-body box-padding">
          <div
            class="border-style-bottom flex_wrap_between_middle header-title"
          >
            <p><span class="titleSelf-linestyle"></span>前十排名</p>
            <i
              class="slip-edit"
              :class="showMore ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"
              @click="showMoreRanking"
            ></i>
          </div>
          <ranking-list
            keyworld="product"
            :api-price="topTenExportProductPrice"
            :api-qty="topTenExportProductQty"
            :permission-price="$permission('warehouseAffair:price')"
            :permission-list="$permission('warehouseAffair:list')"
            text="出库产品前十统计"
          />
          <ranking-list
            v-if="showMore"
            keyworld="dept"
            :api-price="topTenExportDeptPrice"
            :api-qty="topTenExportDeptQty"
            :permission-price="$permission('warehouseAffair:price')"
            :permission-list="$permission('warehouseAffair:list')"
            text="入库产品前十统计"
          />
          <ranking-list
            v-if="showMore"
            keyworld="consume"
            :api-price="topTenConsumeProductPrice"
            :api-qty="topTenConsumeProductQty"
            :permission-price="$permission('consumeOrder:price')"
            :permission-list="$permission('consumeOrder:list')"
            text="消耗前十统计"
          />
        </div>
      </div>
      <div class="layui-row layui-col-space15">
        <div
          v-if="$permission('dashboard:licenseExpiryWarning')"
          class="layui-col-md4 layui-col-sm4"
        >
          <div class="layui-card">
            <div class="layui-card-body box-padding pie-height">
              <div
                class="border-style-bottom flex_wrap_between_middle header-title"
              >
                <p><span class="titleSelf-linestyle"></span>证照效期状态</p>
              </div>
              <pie-chart
                v-if="$permission('licenseExpiryWarning:list')"
                dom-id="licensePie"
                :api="getLicenseExpire"
                vue-router-name="licenseExpiryWarning"
                title="证照效期状态"
              ></pie-chart>
              <div v-else class="noPermiss">
                <NoPermiss title="证照效期状态"></NoPermiss>
              </div>
            </div>
          </div>
        </div>
        <div
          v-if="$permission('dashboard:productExpiryWarning')"
          class="layui-col-md4 layui-col-sm4"
        >
          <div class="layui-card">
            <div class="layui-card-body box-padding pie-height">
              <div
                class="border-style-bottom flex_wrap_between_middle header-title"
              >
                <p><span class="titleSelf-linestyle"></span>产品效期状态</p>
              </div>
              <pie-chart
                v-if="$permission('productExpiryWarning:list')"
                dom-id="productPie"
                :api="getProductExpire"
                vue-router-name="productExpiryWarning"
                title="产品效期状态"
              ></pie-chart>
              <div v-else class="noPermiss">
                <NoPermiss title="产品效期状态"></NoPermiss>
              </div>
            </div>
          </div>
        </div>
        <div
          v-if="$permission('dashboard:stockWarning')"
          class="layui-col-md4 layui-col-sm4"
        >
          <div class="layui-card">
            <div class="layui-card-body box-padding pie-height">
              <div
                class="border-style-bottom flex_wrap_between_middle header-title"
              >
                <p><span class="titleSelf-linestyle"></span>库存状态</p>
              </div>
              <pie-chart
                v-if="$permission('stockWarning:list')"
                dom-id="stockPie"
                :api="getStockExpire"
                vue-router-name="stockWarning"
                title="库存状态"
              ></pie-chart>
              <div v-else class="noPermiss">
                <NoPermiss title="库存状态"></NoPermiss>
              </div>
            </div>
          </div>
        </div>
        <div
          v-if="$permission('dashboard:brandExpireWarning')"
          class="layui-col-md4 layui-col-sm4"
        >
          <div class="layui-card">
            <div class="layui-card-body box-padding pie-height">
              <div
                class="border-style-bottom flex_wrap_between_middle header-title"
              >
                <p><span class="titleSelf-linestyle"></span>厂家营业执照</p>
              </div>
              <pie-chart
                v-if="$permission('brandExpireWarning:list')"
                dom-id="businessLicensePie"
                :api="getBrandBusinessLicenseExpire"
                vue-router-name="brandExpireWarning"
                title="厂家营业执照"
              ></pie-chart>
              <div v-else class="noPermiss">
                <NoPermiss title="厂家营业执照"></NoPermiss>
              </div>
            </div>
          </div>
        </div>
        <div
          v-if="$permission('dashboard:brandExpireWarning')"
          class="layui-col-md4 layui-col-sm4"
        >
          <div class="layui-card">
            <div class="layui-card-body box-padding pie-height">
              <div
                class="border-style-bottom flex_wrap_between_middle header-title"
              >
                <p>
                  <span class="titleSelf-linestyle"></span>厂家医疗器械生产许可
                </p>
              </div>
              <pie-chart
                v-if="$permission('brandExpireWarning:list')"
                dom-id="medicalDeviceLicensePie"
                :api="getBrandMedicalDeviceLicenseExpire"
                vue-router-name="brandExpireWarning"
                title="厂家医疗器械生产许可"
              ></pie-chart>
              <div v-else class="noPermiss">
                <NoPermiss title="厂家医疗器械生产许可"></NoPermiss>
              </div>
            </div>
          </div>
        </div>
        <div
          v-if="$permission('dashboard:brandExpireWarning')"
          class="layui-col-md4 layui-col-sm4"
        >
          <div class="layui-card">
            <div class="layui-card-body box-padding pie-height">
              <div
                class="border-style-bottom flex_wrap_between_middle header-title"
              >
                <p>
                  <span class="titleSelf-linestyle"></span
                  >厂家第一类医疗器械生产备案
                </p>
              </div>
              <pie-chart
                v-if="$permission('brandExpireWarning:list')"
                dom-id="firstMedicalDeviceFilingPie"
                :api="getBrandFirstMedicalDeviceFilingExpire"
                vue-router-name="brandExpireWarning"
                title="厂家第一类医疗器械生产备案"
              ></pie-chart>
              <div v-else class="noPermiss">
                <NoPermiss title="厂家第一类医疗器械生产备案"></NoPermiss>
              </div>
            </div>
          </div>
        </div>
        <div
          v-if="$permission('dashboard:brandExpireWarning')"
          class="layui-col-md4 layui-col-sm4"
        >
          <div class="layui-card">
            <div class="layui-card-body box-padding pie-height">
              <div
                class="border-style-bottom flex_wrap_between_middle header-title"
              >
                <p>
                  <span class="titleSelf-linestyle"></span
                  >厂家生产企业卫生许可证
                </p>
              </div>
              <pie-chart
                v-if="$permission('brandExpireWarning:list')"
                dom-id="sanitaryLicensePie"
                :api="getBrandSanitaryLicenseExpire"
                vue-router-name="brandExpireWarning"
                title="厂家生产企业卫生许可证"
              ></pie-chart>
              <div v-else class="noPermiss">
                <NoPermiss title="厂家生产企业卫生许可证"></NoPermiss>
              </div>
            </div>
          </div>
        </div>
        <div
          v-if="$permission('dashboard:contractExpireWarning')"
          class="layui-col-md4 layui-col-sm4"
        >
          <div class="layui-card">
            <div class="layui-card-body box-padding pie-height">
              <div
                class="border-style-bottom flex_wrap_between_middle header-title"
              >
                <p><span class="titleSelf-linestyle"></span>合同效期状态</p>
              </div>
              <pie-chart
                v-if="$permission('contractExpireWarning:list')"
                dom-id="contractExpirePie"
                :api="getContractExpireExpire"
                vue-router-name="contractExpireWarning"
                title="合同效期状态"
              ></pie-chart>
              <div v-else class="noPermiss">
                <NoPermiss title="合同效期状态"></NoPermiss>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <NeedDealt
      v-if="allTaskInfo.visible"
      v-model:visible="allTaskInfo.visible"
    ></NeedDealt>
  </div>
</template>

<script setup name="dashboard">
import PieChart from './pieChart'
import MonthlyConsumeBar from './monthlyConsumeBar'
import RankingList from './rankingList'
import NeedDealt from './needDealt'
import NoPermiss from '@/components/NoPermiss/index'
import DialogTable from '@/components/DialogTable/index'
import {
  getAmountUsedYesterday,
  getAmountStock,
  getLicenseExpire,
  getProductExpire,
  getStockExpire,
  getBrandBusinessLicenseExpire,
  getBrandMedicalDeviceLicenseExpire,
  getBrandFirstMedicalDeviceFilingExpire,
  getBrandSanitaryLicenseExpire,
  topTenExportProductPrice,
  topTenExportProductQty,
  topTenExportDeptPrice,
  topTenExportDeptQty,
  topTenConsumeProductPrice,
  topTenConsumeProductQty,
  getContractExpireExpire,
} from '@/api/workbench'
import { messageReceivePage, updateReadStatusById } from '@/api/message'
import {
  getScheduleTaskSelectByUserId,
  getScheduleTaskSelectDateCount,
  getScheduleTaskList,
} from '@/api/core'
import moment from 'moment'
const { proxy } = getCurrentInstance()
const route = useRoute()
const msgListInfo = reactive({
  query: {
    curPage: 1,
    pageSize: 5,
  },
  pageSizes: [3, 5, 7, 10],
})
const messageDataList = ref([])
const todoTaskList = computed(() => {
  return proxy.$store.state.user.todoTaskList
})
const notReadCount = ref(0)
const todoTaskCount = computed(() => {
  return proxy.$store.state.user.todoTaskCount
})
const height = ref(0)
const yesterdayAmountUseList = ref([])
const amountStockList = ref([])
const yesterdayAmountIndex = ref(6)
const stockIndex = ref(6)
const showMore = ref(false)
const allTaskInfo = ref({
  visible: false,
})
const calendar = ref({
  date: new Date(),
  count: {},
})
const tableInfo = ref({
  data: [],
  fieldList: [
    { label: '任务类型', value: 'scheduleTaskTypeName', width: '80px' },
    { label: '任务标题', value: 'title', minWidth: '200px' },
    { label: '任务描述', value: 'subTitle', minWidth: '200px' },
    { label: '任务到达时间', value: 'arrivalTime' },
    { label: '计划开始时间', value: 'planStartTime' },
    { label: '计划完成时间', value: 'planEndTime' },
    { label: '任务状态', value: 'statusValue' },
    { label: '备注', value: 'remark' },
  ],
  handle: {
    fixed: 'right',
    label: '操作',
    width: '100',
    btList: [
      {
        label: '处理',
        event: checkCalend,
        show: true,
        ifRender: function (row) {
          return row.status === 1 || row.status === 2
        },
      },
    ],
  },
})
const messageAllData = computed(() => {
  return proxy.$store.state.user.wsInfo
})

watch(
  () => messageAllData.value,
  (val) => {
    setMessageData(val)
  },
  {
    deep: true,
    immediate: true,
  }
)
watch(
  () => calendar.value.date,
  (val) => {
    if (val && proxy.$permission('dashboard:scheduleTask')) {
      let day = moment(val).format('YYYY-MM-DD')
      getScheduleTask(day)
      getScheduleTaskCount(day)
    }
  },
  {
    deep: true,
    immediate: true,
  }
)
onMounted(() => {
  const pageSize = parseInt(localStorage.getItem('spdPageSize'))
  if (pageSize) msgListInfo.query.pageSize = pageSize
  init()
})
function getScheduleTask(date) {
  getScheduleTaskSelectByUserId({ date: date }).then((res) => {
    if (res && res.success) {
      tableInfo.value.data = res.data
    }
  })
}
function getScheduleTaskCount(date) {
  getScheduleTaskSelectDateCount({ date: date }).then((res) => {
    if (res && res.success) {
      let obj = {}
      if (res.data && res.data.length) {
        res.data.forEach((item) => {
          if (item.isHasTasks) {
            obj[item.date] = Number(item.count)
          }
        })
      }
      calendar.value.count = obj
    }
  })
}
function checkCalend(data) {
  let url = data.detailUrl
  let name = ''
  let routes = proxy.$store.state.permission.routes
  routes.map((item) => {
    if (item.children && item.children.length) {
      item.children.map((i) => {
        if (i.url === url) {
          name = url
        }
      })
    }
  })
  data.urlType = 2
  // if(data.detailUrl.indexOf('/asset/assetManage/assetInstrumentsPlan') !== -1){
  //   data.urlType = 3
  // }
  if (name) {
    proxy.$router.push(url)
    proxy.$store.dispatch('settings/toPage', data)
  } else {
    proxy.$message({
      duration: 3500,
      type: 'warning',
      showClose: true,
      message: '你没有相应的菜单权限',
    })
  }
}
function refushCalendar() {
  let day = moment(calendar.value.date).format('YYYY-MM-DD')
  getScheduleTask(day)
  getScheduleTaskCount(day)
}
function setMessageData(val) {
  messageDataList.value = val.messageSendVOS
  notReadCount.value = val.notReadCount || 0
}
function getTodoList() {
  proxy.$store.dispatch('user/refreshTodoList')
}
//跳转
const turnPage = (data, items) => {
  let url = data.url
  let name = ''
  let routes = proxy.$store.state.permission.routes
  routes.map((item) => {
    if (item.children && item.children.length) {
      item.children.map((i) => {
        if (i.url === url) {
          name = url
        }
      })
    }
  })

  if (name) {
    proxy.$router.push(url)
    proxy.$store.dispatch('settings/toPage', data)
    if (items.haveRead === 0) {
      updateReadStatus(items.id)
    }
  } else {
    proxy.$message({
      duration: 3500,
      type: 'warning',
      showClose: true,
      message: '你没有相应的菜单权限',
    })
  }
}
//修改消息是否已读
const updateReadStatus = (id) => {
  updateReadStatusById(id).then((res) => {
    if (res.success) {
      console.log('g')
    }
  })
}
//消息查看更多，跳转到消息中心
const seeMore = (code) => {
  if (code === 'messageManager') {
    let name = ''
    let routes = proxy.$store.state.permission.routes
    routes.map((item) => {
      if (item.children && item.children.length) {
        item.children.map((i) => {
          if (i.resourceCode === code) {
            name = i.url
          }
        })
      }
    })
    if (name) {
      proxy.$router.push(name)
    } else {
      proxy.$message({
        duration: 3500,
        type: 'warning',
        showClose: true,
        message: '你没有相应的菜单权限',
      })
    }
  } else if (code === 'myPendingTask') {
    allTaskInfo.value.visible = true
  }
}
const init = () => {
  if (proxy.$permission('dashboard:yesterdayAmount')) {
    getAmountUsedYesterday().then((res) => {
      if (res && res.success) {
        yesterdayAmountUseList.value = res.data
      }
    })
  }
  if (proxy.$permission('dashboard:depotStorageAmount')) {
    getAmountStock().then((res) => {
      if (res && res.success) {
        amountStockList.value = res.data
      }
    })
  }
  /* lastedNews()
  if (proxy.$permission('dashboard:latestMessage')) {
    lastedNews()
  } */
  // if (proxy.$permission('dashboard:latestMessage')) {
  //   initWs()
  // }
}
const moreYesterdayAmount = () => {
  if (yesterdayAmountIndex.value !== 6) {
    yesterdayAmountIndex.value = 6
  } else {
    yesterdayAmountIndex.value = yesterdayAmountUseList.value.length
  }
}
const lastedNews = () => {
  let params = {}
  params.curPage = msgListInfo.query.curPage
  params.pageSize = msgListInfo.query.pageSize
  params.sortString = 'create_time desc'
  params.haveRead = 0
  if ('system_admin' !== proxy.$store.state.user.userInfo.user.type) {
    params.userId = proxy.$store.state.user.userInfo.user.id
  }
  messageReceivePage(params).then((res) => {
    if (res.success) {
      msgListInfo.total = res.total
      messageDataList.value = res.data
      if (messageDataList.value != null) {
        messageDataList.value.forEach(
          (val) => (val.content = JSON.parse(val.content))
        )
      }
    }
  })
}
const moreAmountStock = () => {
  if (stockIndex.value !== 6) {
    stockIndex.value = 6
  } else {
    stockIndex.value = amountStockList.value.length
  }
}
const clickUsePrice = (id) => {
  let params
  if (id) {
    params = {
      fromType: 'yesterdayAmount',
      consumeDeptId: id,
    }
  } else {
    params = {
      fromType: 'yesterdayAmount',
    }
  }
  proxy.$router.push({
    name: 'consumeOrder',
    params,
  })
}
const clickStockPrice = (id) => {
  let params = {
    depotId: id ? id : '',
  }
  proxy.$router.push({
    name: 'depotStockQuery',
    params,
  })
}
const showMoreRanking = () => {
  showMore.value = !showMore.value
}
</script>

<style scoped lang="scss">
.dashboard-pagination {
  .el-pagination--small span:not([class*='suffix']) {
    height: 27px;
  }
}
.dashboard-container {
  background-color: #f0f2f5;
  position: relative;
  max-height: calc(100vh - 114px);
  overflow-y: auto;
  overflow-x: hidden;
  .layui-card {
    margin-bottom: 15px;
  }
}
.box-padding {
  padding: 8px 15px 0 15px;
  .header-title {
    padding: 5px 0;
  }
  h4 {
    height: 40px;
    padding: 5px 15px;
    box-sizing: border-box;
    text-align: left;
    display: flex;
    align-items: center;
    font-size: 1rem;
    //color: #009688;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .border {
    margin: 10px;
    word-wrap: break-word;
    background-color: #fff;
    border-radius: 0.25rem;
    overflow: hidden;
    //background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%) !important;
    //background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%) !important;
    //color: white;
    background-color: #f9fbfd;
    .report-title {
      color: #7a7a7a;
      font-size: 12px;
    }
  }
  .box-padding-left {
    padding: 5px 0 5px 10px;
  }
  .tip-date {
    padding: 0 4px;
    color: white;
    line-height: 20px;
    background-color: #ff9906;
    font-size: 12px;
  }
}

.dashboard-title {
  width: 100%;
  height: 32px;
  line-height: 32px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 15px;
  box-sizing: border-box;
  color: #999;
  font-size: 13px;
}
.titleSelf-linestyle {
  display: inline-block;
  border-radius: 1px;
  width: 5px;
  margin-right: 6px;
  margin-bottom: 3px;
  height: 0.9pc;
  //background-color: #6dc1a9;
  vertical-align: middle;
}
.pie-height {
  height: 290px;
}
.box-shadow:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.border-style-bottom {
  margin-bottom: 0;
}
.noPermiss {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.badge {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: #f56c6c;
  margin-right: 5px;
}
.tips-list-item {
  padding: 0 12px !important;
  position: relative;
}
.right-menu-item {
  position: absolute;
  left: 130px;
  color: #6dc1a9;
  font-size: 12px;
  cursor: pointer;
}
.badge-list {
  position: absolute;
  top: 20px;
}
.todoTaskCount {
  width: 68px;
}
:deep(.right-menu-item) {
  .is-fixed {
    right: 0px !important;
  }
}
.display-flex {
  width: 100%;
  padding: 10px 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  :deep(.el-calendar-table .el-calendar-day) {
    height: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  :deep(.el-badge__content.is-fixed) {
    top: -3px;
  }
  .calendar-line {
    width: 12px;
    height: 1px;
    background: #333333;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
  }
}
</style>
